<script setup>
import { ref, onBeforeUnmount, onMounted, nextTick } from 'vue'
import { initWS } from '/src/utils/initWS.js'
import * as echarts from 'echarts'
import { pro_option } from '../js/ecahrs_1.js'
import { dataPro_com, stepName, dataPro_com2 } from '../js/dataPro_component.js'

const ip = `ws://${window.location.host}/ws/`
// const ip = `ws://10.202.1.9:20038/`
const config = {
  path: `${ip}monitor/component-status`,
  name: '组件状态',
}

const config2 = {
  path: `${ip}obstacles-event/timestamp`,
  name: '组件状态',
}

const config3 = {
  path: `${ip}obstacles-event/avg-delay`,
  name: '平均时延',
}
const config4 = {
  path: `${ip}obstacles-event/avg-fps`,
  name: '平均帧率',
}

let chart_time = null
let xDataTime = []
let yDataTime = []

let chart_fps = null
let xDataFps = []
let yDataFps = []

let data = ref(null)
let data2 = ref(null)
const handleWsData = (e) => {
  data.value = dataPro_com(JSON.parse(e.data)['component-status'])
}

const handleWsData2 = (e) => {
  data2.value = dataPro_com2(JSON.parse(e.data)['map-timestamp'])
}

const handleWsData3 = (e) => {
  const params = JSON.parse(e.data)
  const x = params['time']
  const y = params['avg-delay']
  xDataTime.push(x)
  yDataTime.push(y)

  chart_time.setOption({
    xAxis: { data: xDataTime },
    series: [{ data: yDataTime }],
  })
}

const handleWsData4 = (e) => {
  const params = JSON.parse(e.data)
  const x = params['time']
  const y = params['avg-fps']
  xDataFps.push(x)
  yDataFps.push(y)

  chart_fps.setOption({
    xAxis: { data: xDataFps },
    series: [{ data: yDataFps }],
  })
}

const ws = initWS(config, handleWsData)
const ws2 = initWS(config2, handleWsData2)
const ws3 = initWS(config3, handleWsData3)
const ws4 = initWS(config4, handleWsData4)

// 卸载
onBeforeUnmount(() => {
  if (ws) ws.close()
  if (ws2) ws2.close()
  if (ws3) ws3.close()
})

const formatTimestamp = (row) => {
  const date = new Date(row.timestamp)
  return date.toISOString().replace('T', ' ').split('.')[0] // 格式: YYYY-MM-DD HH:mm:ss
}

const formatStatus = (row) => {
  return row.status == 0 ? '正常' : '异常'
}

const formatTimestam2 = (row) => {
  if (row.timestamp < 100000) return 'x'
  const date = new Date(row.timestamp)
  return date.toISOString().replace('T', ' ').split('.')[0] // 格式: YYYY-MM-DD HH:mm:ss
}

const nameF = (row) => {
  const params = {
    0: '帧率大于等于9',
    1: '帧率大于5且小于9',
    2: '帧率小于等于5',
  }
  return params[row.status]
}

const nameXT = (row) => {
  return row.status == 0 ? '接收者' : '发送者'
}

const formatStepName = (row) => {
  return stepName[row.step]
}

onMounted(() => {
  nextTick(() => {
    chart_time = echarts.init(document.querySelector('.echars_time'))
    chart_time.setOption(pro_option())
    chart_fps = echarts.init(document.querySelector('.echars_fps'))
    chart_fps.setOption(pro_option())
  })
})
</script>
<template>
  <div class="equipment-container">
    <div class="top">
      <p>组件状态信息</p>
    </div>

    <div class="main">
      <div class="left">
        <div class="showTableEle2">
          <el-table :data="data?.header" border style="width: 100%" show-overflow-tooltip>
            <el-table-column prop="name" label="模块" />
            <el-table-column prop="status" :formatter="formatStatus" label="状态" />
            <el-table-column prop="timestamp" :formatter="formatTimestamp" label="时间戳" />
          </el-table>
        </div>

        <div class="showTableEle2">
          <div>
            <p>各阶段时间戳</p>
            <el-table :data="data2?.mapTimestamp" border style="width: 100%" show-overflow-tooltip>
              <el-table-column prop="step" :formatter="formatStepName" label="阶段" />
              <el-table-column prop="timestamp" :formatter="formatTimestam2" label="时间戳" />
              <el-table-column prop="diff" label="时延" />
            </el-table>
          </div>
        </div>

        <div class="showTableEle2">
          <p>通道状态列表</p>
          <el-table :data="data?.vecChannelStatus" border style="width: 100%" show-overflow-tooltip>
            <el-table-column prop="name" label="通道名" />
            <el-table-column prop="rx-tx" :formatter="nameXT" label="通道的接收者或发送者" />
            <el-table-column prop="status" :formatter="nameF" label="通道状态" width="120" />
            <el-table-column prop="fps" label="通道帧率" width="80" />
          </el-table>
        </div>
      </div>
      <div class="right">
        <p>平均时延</p>
        <div class="echars_time"></div>

        <p>平均帧率</p>
        <div class="echars_fps"></div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.equipment-container {
  width: 100%;
  height: 100%;
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.main {
  flex: 1;
  width: 100%;
  display: flex;

  .left {
    width: 100%;
  }

  .right {
    width: 100%;
    padding: 0 20px;

    .echars_time,
    .echars_fps {
      width: 100%;
      height: 400px;
    }
  }
}

.showEcahras {
  min-height: 300px;
  display: flex;

  > div:nth-child(1) {
    width: 40%;

    > p {
      margin-bottom: 10px;
      font-size: 14px;
    }
  }
}

.showTableEle2 {
  margin-bottom: 20px;

  > p {
    margin-bottom: 10px;
    font-size: 14px;
  }
}

::v-deep .el-table .cell {
  padding: 4px 10px;
}

.top {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 10px;
}
</style>
